<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>差值练习</title>
    <style>
       .content{
           width: 200px;
           /* 不折行 */
           white-space: nowrap;
           /* 超出隐藏 */
           overflow: hidden;
           /* 文本超出显示省略号 */
           text-overflow: ellipsis;
       }
    
    </style>
</head>
<body>
    <div id="app">
        {{ message }}<br>
        {{ message.split('').reverse().join('') }}  <br>
        {{ html }} <br>
       <!-- 渲染html文本 -->
        <span v-html="html"></span>  
        <!-- x渲染纯文本 -->
        <div v-text="html">abcdefghijklmnopqrstuvwxyz</div>
        <!-- 动态绑定事件属性值，可简写“:” -->
        <div class="content" v-bind:title="content">{{content}}</div>
        <div class="content" :title="content">{{content}}</div>

    </div>




<!-- 引入vue.js文件 -->
    <script src="./lib/vue.js"></script>
    <script>
       const vm = new Vue({
           el:'#app',
           data:{
               message:'Hello Vue.js',
               html:'<input placeholder="请输入文本"/>',
              content:'我们都火灾这个城市里面，有没有那么一首歌，会让你轻轻跟着和'
           }
       })
    
    
    </script>
</body>
</html>